<template>
	<view class="container">
		<view class="uni-column">
			<view class="uni-column-left">
				用户昵称
			</view>
			<view class="uni-column-right">
				<input class="uni-column-input" v-model="user_info.nickname" placeholder="输入您的新昵称"/>
			</view>
		</view>
		
		<view class="button-sp-area" @click="update_set_nickname()">
		    <button class="mini-btn" type="warn" size="default">完成</button>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	import tools from "../../common/tools"
	import apiuser from '../../common/api/user'
	export default {
		data() {
			return {
				user_info:{
					nickname:''
				}
			};
		},
		components:{
			apiuser,
			tools
		},
        onLoad(options){
			this.user_info.nickname=options.nickname
        },
		methods:{
			update_set_nickname(){
				apiuser.update_basic_info({nickname:this.user_info.nickname}).then(res =>{
					if(res.code==1){
		　　　　　　　　　uni.showToast({
		　　　　　　　　　　　title: '设置成功',
		　　　　　　　　　　　icon: 'none'
		　　　　　　　　　})
						tools.update_set_user()
					}else{
		　　　　　　　　　uni.showToast({
		　　　　　　　　　　　title: '设置失败',
		　　　　　　　　　　　icon: 'none'
		　　　　　　　　　})
					}
				}).catch(res=>{
	　　　　　　　　　uni.showToast({
	　　　　　　　　　　　title: '设置失败',
	　　　　　　　　　　　icon: 'none'
	　　　　　　　　　})
				});				
			}
		}
	}
</script>

<style lang='scss'>
	page{
		background-color:#F5F5F5;
	}
	.container{
		width:99%;
		margin:0 auto;
		padding-top:20upx;
	}
	.uni-column{
		display:flex;
        flex-direction: row;
        flex-wrap: wrap;
		height:100upx;
		background-color:#FFFFFF;
		border-bottom:1upx solid #F5F5F5;
		.uni-column-left{
			width:28%;
			padding-left:2%;
			line-height:100upx;
		}
		.uni-column-right{
			width: 70%;
			line-height:100upx;
		}
		.uni-column-input{
			height:100upx;
			line-height:100upx;
		}
	}
	
	
	.button-sp-area{
		padding-top:100upx;
		width:80%;
		margin:0 auto;
	}
	.button-sp-area>button{
		border-radius:50upx;
	}
	
	
	/**收取验证码**/
	.get-msg{
		width: 100%;
		display:flex;
        flex-direction: row;
        flex-wrap: wrap;
		background-color: #FFFFFF;
		height:100upx;
		.uni-msg{
			width:70%;
		}
		.uni-msg-input{
			height:100upx;
			line-height:100upx;
			padding-left:2%;
		}
		.send-msg{
			width:30%;
			padding-top:10upx;
			margin-top:10upx;
		}
		.send-msg>button{
			width:90%;
			line-height:60upx;
			height:60upx;
			border:1px solid #FF3333;
			color:#FF3333;
			background-color:#FFFFFF;
			font-size:26upx;
			border-radius:40upx;
		}
	}
	/**收取验证码结束**/
</style>
